<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript DOM删除和替换节点</title>
		<style>
			* { padding: 0; margin: 0; font-size: 12px; }
			ul, li { list-style: none; }
			li { float: left; text-align: center; width: 300px; }
		</style>
	</head>
	<body>
		<ul>
			<li>
				<img src="image/sunflower.jpg" id="first">
				<p><input type="button" value="删除我吧" onclick="del()"></p>
			</li>
			<li>
				<img src="image/lily.jpg" id="second">
				<p><input type="button" value="换换我吧" onclick="rep()"></p>
			</li>
		</ul>
		<script>
			function del() {
				var delNode = document.getElementById("first");
				delNode.parentNode.removeChild(delNode);
			}
			function rep() {
				var oldNode = document.getElementById("second");
				var newNode = document.createElement("img");
				newNode.setAttribute("src", "image/sunflower.jpg");
				oldNode.parentNode.replaceChild(newNode, oldNode);
			}
		</script>
	</body>
</html>